<template>
	<div id="app">
		<div class="container">
			<!-- 顶部搜索框模块 -->
			<div class="form-group">
				<div class="input-group">
					<h4>品牌管理</h4>
				</div>
			</div>

			<!-- 数据表格 -->
			<table class="table table-bordered table-hover mt-2">
				<thead>
					<tr>
						<th>编号</th>
						<th>资产名称</th>
						<th>价格</th>
						<th>创建时间</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody v-if="list.length > 0">
					<!-- 样例行 -->
					<tr v-for="(item, index) in list" :key="index">
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
						<!-- 如果价格超过100，就有red这个类 -->
						<!-- class是否有red，要写判断 -->
						<!-- :classe="{ '类名1': true/fasle, '类名2': true/false }" -->
						<td :class="{ 'red': item.price > 100, 'aaa': true }">
							{{ item.price }}
						</td>
						<td>{{ item.time.toLocaleDateString() }}</td>
						<!-- 点击a标签，只执行自己的点击事件，不触发href地址跳转 -->
						<td><a href="#" @click.prevent="list.splice(index, 1)">删除</a></td>
					</tr>
					<!-- 统计 -->
					<tr style="background-color: #EEE">
						<td>统计:</td>
						<td colspan="2">总价钱为: {{ sum }}</td>
						<td colspan="2">平均价: {{ arv }}</td>
					</tr>
				</tbody>
				<tfoot v-else>
					<tr>
						<td colspan="5" style="text-align: center">暂无数据</td>
					</tr>
				</tfoot>
			</table>

			<!-- 添加资产 -->
			<form class="form-inline">
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" 
						placeholder="资产名称" v-model.lazy="obj.name"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<div class="form-group">
					<div class="input-group">
						<input type="text" class="form-control" 
						placeholder="价格" v-model.number.lazy="obj.price"/>
					</div>
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<!-- 阻止表单提交 -->
				<button type="button" @click="addOne"
				class="btn btn-primary">添加资产</button>
			</form>
		</div>
	</div>
</template>

<script setup>
import { reactive, computed, watch } from 'vue'
const data = [
          { id: 100, name: "外套", price: 199, time: new Date('2010-08-12') },
          { id: 101, name: "裤子", price: 34, time: new Date('2013-09-01') },
          { id: 102, name: "鞋", price: 25.4, time: new Date('2018-11-22') },
          { id: 103, name: "头发", price: 19900, time: new Date('2020-12-12') }
]
let list_json = sessionStorage.getItem('list')
const list = reactive([])
if(list_json) {
	let list_arr = JSON.parse(list_json)
	console.log(list_arr)
	list_arr.forEach(item => item.time = new Date(item.time))
	list.push(...list_arr)
} else {
	list.push(...data)
}



// obj是为了绑定输入框
const obj = reactive({
	name: '',  // 接收用户输入的商品名称
	price: 0.0  // 接收用户输入的商品价格
})

const addOne = () => {
	list.push({
		// id通过当前数组的数据，计算最大id + 1
		id: Math.max(...list.map(item => item.id)) + 1,
		name: obj.name,
		price: obj.price,
		time: new Date()  // 当前时间的对象
	})
	// 清空数据
	obj.name = ''
	obj.price = 0.0
}
// 计算总价
const sum = computed(() => {
	let total = 0
	list.forEach(item => total += item.price)
	return total
})
// 计算均价
const arv = computed(() => {
	if(list.length > 0) {
		return sum.value / list.length
	} else {
		return 0
	}
})

watch(list, 
(newVal, oldVal) => { 
	// console.log('list变化了吗') 
	// console.log(newVal)
	// 在会话存储中存入数据
	let arr = []
	newVal.forEach(item => arr.push(item))
	sessionStorage.setItem('list', JSON.stringify(arr))
}, { 
	deep: false, 
	immediate: false ,
},
)
</script>

<style scoped>
.red {
    color: red;
}
</style>